<template>
	<view>
		<!--service/comments/comments.wxml-->
		<view class="comment">
			<view class="tipsbox z-margin-16 z-flex-0">
				<view class="tipsitem z-margin-l-16  z-padding-lr-16 z-font-24 z-radius-8" :class="active == 0 ? 'active' : ''" @tap="change(0)">
					全部（{{ num.goodPercent * 100 }}%好评）
				</view>
				<view class="tipsitem z-margin-l-16  z-padding-lr-16 z-font-24 z-radius-8" :class="active == 1 ? 'active' : ''" @tap="change(1)">
					好评（{{ num.goodNum }}）
				</view>
				<view class="tipsitem z-margin-l-16  z-padding-lr-16 z-font-24 z-radius-8" :class="active == 2 ? 'active' : ''" @tap="change(2)">
					有图（{{ num.imageNum }}）
				</view>
				<view class="tipsitem z-margin-l-16  z-padding-lr-16 z-font-24 z-radius-8" :class="active == 3 ? 'active' : ''" @tap="change(3)">
					中评（{{ num.middleNum }}）
				</view>
				<view class="tipsitem z-margin-l-16  z-padding-lr-16 z-font-24 z-radius-8" :class="active == 4 ? 'active' : ''" @tap="change(4)">
					差评（{{ num.badNum }}）
				</view>
			</view>
			<view class="mian-box">
				<scroll-view class="scroll-box z-padding-lr-32" scroll-y="true" :show-scrollbar="false" enhanced="true" @scrolltolower="more">
					<block v-for="(item,index) in list" :key="item.id">
						<comment :info="item"></comment>
					</block>
					<u-empty v-if="finish && list.length === 0" text="列表为空" mode="list"></u-empty>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import comment from "@/component/comment/comment.vue"
export default {
	components:{
		comment
	},
	data() {
		return {
			list: [],
			finish: false,
			loading: false,
			page: 1,
			num: '',
			type: '',
			id: '',
			active: 0
		};
	},
	onLoad(options) {
		this.type = options.type,
		this.id = options.id
		this.getInfo();
		this.reload();
	},
	methods: {
		change(e) {
			this.active = e
			this.reload();
		},
		reload() {
			this.list = [],
			this.page = 1,
			this.finish = false
			this.getList();
		},
		more() {
			this.page = ++this.page
			this.getList();
		},
		getList() {
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true
			let data = {
				page: this.page
			};
			if (this.type == 'goods') {
				data['goods_id'] = this.id;
			} else if (this.type == 'skill') {
				data['skill_id'] = this.id;
			} else if (this.type == 'shop') {
				data['shop_id'] = this.id;
			} else if (this.type == 'user') {
				data['user_id'] = this.id;
			}
			if (this.active == 1) {
				data['score'] = 5;
			} else if (this.active == 2) {
				data['images'] = 1;
			} else if (this.active == 3) {
				data['score'] = 2;
			} else if (this.active == 4) {
				data['score'] = 1;
			}
			this.http.get('comment/getlist', data)
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true
					}
					let arr = this.list.concat(res.data);
					this.list = arr
				})
				.finally((res) => {
					this.loading = false
				});
		},
		getInfo() {
			let data = {
				type: this.type
			};
			if (this.type == 'goods') {
				data['goods_id'] = this.id;
			} else if (this.type == 'skill') {
				data['skill_id'] = this.id;
			} else if (this.type == 'shop') {
				data['shop_id'] = this.id;
			} else if (this.type == 'user') {
				data['user_id'] = this.id;
			}
			this.http.get('comment/totalcomment', data).then((res) => {
				this.num = res.data
			});
		}
	}
};
</script>

<style>
/* service/comments/comments.wxss */

.comment {
	height: 100vh;
	/* #ifdef H5 */
	height:calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
	background: #edf1f4;
}
.tipsbox {
	display: flex;
	overflow-x: auto;
}
.tipsbox::-webkit-scrollbar {
	display: none;
}

.tipsitem {
	height: 56rpx;
	background-color: #fff;
	color: #6b738b;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-sizing: border-box;
}
.active {
	background-color: #62cb81;
	color: #fff;
}
.mian-box {
	flex: 1;
	overflow: hidden;
}

.scroll-box {
	height: 100%;
	box-sizing: border-box;
}
</style>
